<template>
  <div id="app">
    <a-config-provider :locale="locale">
      <a-layout class="layout">
        <a-layout-header class="layout-header">
          <div class="layout-header-logo">
            物业管理系统
          </div>
          <a-dropdown class="layout-header-my">
            <span>超级管理员</span>
            <a-menu slot="overlay">
              <a-menu-item><a-icon type="edit" />修改密码</a-menu-item>
              <a-menu-item><a-icon type="logout" />退出账号</a-menu-item>
            </a-menu>
          </a-dropdown>
        </a-layout-header>
        <a-layout>
          <a-layout-sider :width="200" class="layout-sider" style="position: fixed; background-color: white;">
            <a-menu mode="inline" v-model="currentRoute" @click="handleSiderClick">
              <a-sub-menu>
                <span slot="title">日常工作</span>
                <a-menu-item key="1-1">工作台主页</a-menu-item>
                <a-menu-item key="1-2">最新通知</a-menu-item>
                <a-menu-item key="1-3">事务提醒</a-menu-item>
                <a-menu-item key="1-4">我的任务</a-menu-item>
                <a-menu-item key="1-5">日程安排</a-menu-item>
                <a-menu-item key="1-6">通知管理</a-menu-item>
                <a-menu-item key="1-7">报事管理</a-menu-item>
                <a-menu-item key="1-8">报事办理</a-menu-item>
                <a-menu-item key="1-9">报事备案</a-menu-item>
              </a-sub-menu>
              <a-sub-menu>
                <span slot="title">房产管理</span>
                <a-menu-item key="2-1">楼宇设置</a-menu-item>
                <a-menu-item key="2-2">单元设置</a-menu-item>
                <a-menu-item key="2-3">房型（业主）设置</a-menu-item>
                <a-menu-item key="2-4">水表设置</a-menu-item>
                <a-menu-item key="2-5">电表设置</a-menu-item>
                <a-menu-item key="2-6">车位设置</a-menu-item>
              </a-sub-menu>
              <a-sub-menu>
                <span slot="title">租户管理</span>
                <a-menu-item key="3-1">关注列表</a-menu-item>
                <a-menu-item key="3-2">租户信息管理</a-menu-item>
                <a-menu-item key="3-3">车位合同信息</a-menu-item>
                <a-menu-item key="3-4">收楼管理</a-menu-item>
                <a-menu-item key="3-5">租户活动管理</a-menu-item>
                <a-menu-item key="3-6">非租户活动管理</a-menu-item>
                <a-menu-item key="3-7">活动审核</a-menu-item>
                <a-menu-item key="3-8">收费审核</a-menu-item>
                <a-menu-item key="3-9">装修巡检</a-menu-item>
                <a-menu-item key="3-10">装修过程管理</a-menu-item>
                <a-menu-item key="3-11">装修过程审核</a-menu-item>
                <a-menu-item key="3-12">活动回访</a-menu-item>
                <a-menu-item key="3-13">活动查询</a-menu-item>
                <a-menu-item key="3-14">归档记录</a-menu-item>
                <a-menu-item key="3-15">租户留言</a-menu-item>
              </a-sub-menu>
              <a-sub-menu>
                <span slot="title">财务管理</span>
                <a-menu-item key="4-1">收费项目</a-menu-item>
                <a-menu-item key="4-2">收费计划</a-menu-item>
                <a-menu-item key="4-3">抄表管理</a-menu-item>
                <a-menu-item key="4-4">计费管理</a-menu-item>
                <a-menu-item key="4-5">计费审批</a-menu-item>
                <a-menu-item key="4-6">杂费管理</a-menu-item>
                <a-menu-item key="4-7">保证金</a-menu-item>
                <a-menu-item key="4-8">违约金管理</a-menu-item>
                <a-menu-item key="4-9">缴费汇总</a-menu-item>
                <a-menu-item key="4-10">按收费项汇总</a-menu-item>
              </a-sub-menu>
              <a-sub-menu>
                <span slot="title">巡检预警</span>
                <a-menu-item key="5-1">巡检终端机</a-menu-item>
                <a-menu-item key="5-2">巡检终端卡</a-menu-item>
                <a-menu-item key="5-3">楼层地图</a-menu-item>
                <a-menu-item key="5-4">楼层点布置</a-menu-item>
                <a-menu-item key="5-5">巡检线路</a-menu-item>
                <a-menu-item key="5-6">巡检排班</a-menu-item>
                <a-menu-item key="5-7">巡检调度</a-menu-item>
                <a-menu-item key="5-8">实时位置</a-menu-item>
                <a-menu-item key="5-9">轨迹回放</a-menu-item>
                <a-menu-item key="5-10">签到统计</a-menu-item>
                <a-menu-item key="5-11">安全预警</a-menu-item>
              </a-sub-menu>
              <a-sub-menu>
                <span slot="title">设备管理</span>
                <a-menu-item key="6-1">第三方公司</a-menu-item>
                <a-menu-item key="6-2">设备档案</a-menu-item>
                <a-menu-item key="6-3">保养计划</a-menu-item>
                <a-menu-item key="6-4">保养验收</a-menu-item>
              </a-sub-menu>
              <a-sub-menu>
                <span slot="title">仓库管理</span>
                <a-menu-item key="7-1">仓库设置</a-menu-item>
                <a-menu-item key="7-2">物品管理</a-menu-item>
                <a-menu-item key="7-3">入库单管理</a-menu-item>
                <a-menu-item key="7-4">出库单管理</a-menu-item>
                <a-menu-item key="7-5">入库单查询</a-menu-item>
                <a-menu-item key="7-6">出库单查询</a-menu-item>
                <a-menu-item key="7-7">库存查询</a-menu-item>
                <a-menu-item key="7-8">统计报表</a-menu-item>
                <a-menu-item key="7-9">库存提醒记录</a-menu-item>
              </a-sub-menu>
              <a-sub-menu>
                <span slot="title">档案管理</span>
                <a-menu-item key="8-1">建档管理</a-menu-item>
                <a-menu-item key="8-2">档案查询</a-menu-item>
                <a-menu-item key="8-3">借阅管理</a-menu-item>
                <a-menu-item key="8-4">到期提醒</a-menu-item>
              </a-sub-menu>
              <a-sub-menu>
                <span slot="title">人事管理</span>
                <a-menu-item key="9-1">部门管理</a-menu-item>
                <a-menu-item key="9-2">员工管理</a-menu-item>
                <a-menu-item key="9-3">班次设置</a-menu-item>
                <a-menu-item key="9-4">班制设置</a-menu-item>
                <a-menu-item key="9-5">人员排班</a-menu-item>
                <a-menu-item key="9-6">节假日设置</a-menu-item>
                <a-menu-item key="9-7">排班管理</a-menu-item>
              </a-sub-menu>
              <a-sub-menu>
                <span slot="title">外派管理</span>
                <a-menu-item key="10-1">外派公司</a-menu-item>
                <a-menu-item key="10-2">服务项目</a-menu-item>
                <a-menu-item key="10-3">服务记录</a-menu-item>
              </a-sub-menu>
              <a-sub-menu>
                <span slot="title">统计报表</span>
                <a-menu-item key="11-1">租赁情况汇总表</a-menu-item>
                <a-menu-item key="11-2">常规收费项统计</a-menu-item>
              </a-sub-menu>
              <a-sub-menu>
                <span slot="title">系统管理</span>
                <a-menu-item key="12-1">用户管理</a-menu-item>
                <a-menu-item key="12-2">角色组设置</a-menu-item>
                <a-menu-item key="12-3">审批流程</a-menu-item>
                <a-menu-item key="12-4">数据备份</a-menu-item>
                <a-menu-item key="12-5">系统日志</a-menu-item>
              </a-sub-menu>
            </a-menu>
          </a-layout-sider>
          <a-layout class="layout-main">
            <a-breadcrumb class="layout-main-breadcrumb" style="margin: 16px 0;" :routes="breadcrumbRoute" />
            <router-view @route="handleRouteChanged" />
          </a-layout>
        </a-layout>
      </a-layout>
    </a-config-provider>
    <!--img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/-->
    <!---->
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN';

export default {
  name: 'App',
  components: {
    // HelloWorld
  },
  data: () => ({
    currentRoute: ['1-1'],
    locale: zh_CN,
    breadcrumbRoute: [
      { path: 'main', breadcrumbName: '日常' },
      { path: 'desktop', breadcrumbName: '工作台主页' },
    ],
  }),
  methods: {
    handleSiderClick(e) {
      const obj = {
        '1-1': '/',
        '1-2': '/main/notification',
        '1-3': '/main/todo',
        '1-4': '/main/task',
        '1-5': '/main/calendar',
        '1-6': '/main/notification/management',
        '1-7': '/main/affair/management',
        '1-8': '/main/affair/handle',
      };
      if (obj[e.key]) {
        this.$router.push(obj[e.key]);
      } else {
        this.$notification.open({
          message: '页面未找到',
          description: 'not implemented',
          duration: 0,
        });
      }
    },
    handleRouteChanged() {
      const obj = {
        '/': '1-1',
        '/main': '1-1',
        '/main/notification': '1-2',
        '/main/todo': '1-3',
        '/main/task': '1-4',
        '/main/calendar': '1-5',
        '/main/notification/management': '1-6',
        '/main/affair': '1-7',
        '/main/affair/management': '1-7',
        '/main/affair/handle': '1-8',
      };
      const bread = {
        'main': '日常',
        'notification': '最新通知',
        'todo': '事务提醒',
        'task': '我的任务',
        'calendar': '日程安排',
        'management': '管理',
        'affair': '报事',
        'handle': '办理',
      };
      if (typeof this.currentRoute === 'object') {
        this.currentRoute[0] = obj[this.$route.path];
        this.breadcrumbRoute.length = 0;
        if (this.$route.path === '/') {
          this.breadcrumbRoute.push({ path: 'main', breadcrumbName: '日常' });
          this.breadcrumbRoute.push({ path: 'desktop', breadcrumbName: '工作台主页' });
        } else {
          const arr = this.$route.path.split('/');
          for (const x of arr) {
            if (x !== '') this.breadcrumbRoute.push({ path: x, breadcrumbName: bread[x] });
          }
        }
      }
    }
  },
}
</script>

<style>
/* #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
  .layout-header-logo {
    /* width: 120px;
    height: 31px;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px 28px 16px 0; */
    float: left;
    color: white;
  }

  .layout-header-my {
    /* width: 120px;
    height: 31px;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px 28px 16px 0; */
    float: right;
    color: white;
  }

  .layout-main {
    padding: 0 24px 24px;
    left: 200px;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 64px;
    bottom: 0;
  }

  .layout-main-breadcrumb {
    margin: 16px 0;
  }

  .layout-sider {
    overflow: auto;
    top: 64px;
    bottom: 0;
    position: fixed;
    left: 0;
    background-color: white;
    border-right: 1px solid #e8e8e8;
  }

  .ant-table-row {
    background-color: white;
  }
</style>
